<template>
  <div class='tender-manage-container'>

    <el-row justify="end"
            class="search-form-container"
            type="flex">
      <el-col :span="24"
              class="pull-right"
              align="right">
        <!-- <el-select @change="chooseProfessType"
                   v-model="searchForm.professType">
          <el-option :value="item.value"
                     v-for="(item) in professTypeList"
                     :label="item.label"
                     :key="item.value">
          </el-option>

        </el-select> -->
        <el-select value-key="value"
                   placeholder="选择省份"
                   @change="chooseProvince"
                   v-model="province">
          <el-option v-for="(item) in addressOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item">
          </el-option>
        </el-select>
        <el-select value-key="value"
                   placeholder="选择城市"
                   v-model="city"
                   @change="chooseCity">
          <el-option v-for="(item) in cityList"
                     :key="item.value"
                     :label="item.label"
                     :value="item">
          </el-option>
        </el-select>
        <el-select value-key="value"
                   placeholder="选择区域"
                   v-model="area"
                   @change="chooseArea">
          <el-option v-for="(item) in areaList"
                     :key="item.value"
                     :label="item.label"
                     :value="item">
          </el-option>
        </el-select>
        <el-input placeholder="项目名称"
                  class="input-with-select search-input">
          <el-button slot="append"
                     class="search-btn"
                     icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="tender-project-row">
      <el-col :span="6"
              v-for="(item, index) in tenderProjectList.list"
              :key="index">
        <div class="tender-project-container"
             @click="linkto">
          <img src=""
               alt="">
          <p>{{item.name}}</p>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
              align="center">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       :current-page="tenderProjectList.currentPage"
                       :page-sizes="[8]"
                       :page-size="tenderProjectList.pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="tenderProjectList.total_count">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 省市区数据
      addressOptions: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      province: {},
      city: {},
      area: {},
      // 专业类型下拉框列表
      professTypeList: [
        { value: '0', label: '专业类型' },
        { value: '1', label: '装配' },
        { value: '2', label: '钢结构' },
        { value: '3', label: '现浇' },
        { value: '4', label: '门窗' },
      ],
      // 搜索条件对象
      searchForm: {
        province: '',
        province_no: '',
        city: '',
        city_no: '',
        area: '',
        area_no: '',
        professType: '0'
      },
      // 招标项目列表
      tenderProjectList: {
        list: [
          { name: '11' },
          { name: '22' },
          { name: '33' },
          { name: '44' },
          { name: '55' },
          { name: '66' },
          { name: '77' },
          { name: '88' },
        ],
        currentPage: 1,
        pagesize: 8,
        total_count: 0,
        total_page: 0
      }
    }
  },
  methods: {
    //地址数据
    getAddressData () {
      fetch(`/static/area.json`, {
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        },
      }).then(res => {
        return res.json()
      }).then(res => {
        this.addressOptions = res.data
        // console.log(this.addressOptions, 'address options')
      })
    },
    // 选择省
    chooseProvince (item) {
      this.cityList = item.children
      this.areaList = []
      this.city = {}
      this.area = {}
      this.searchForm.province = item.label
      this.searchForm.province_no = item.value
      this.searchForm.city = ''
      this.searchForm.city_no = ''
      this.searchForm.area = ''
      this.searchForm.area_no = ''
    },
    // 选择市
    chooseCity (item) {
      this.areaList = item.children
      this.area = {}
      this.searchForm.city = item.label
      this.searchForm.city_no = item.value
      this.searchForm.area = ''
      this.searchForm.area_no = ''
    },
    // 选择区
    chooseArea (item) {
      this.searchForm.area = item.label
      this.searchForm.area_no = item.value
    },
    // 选择专业类型
    chooseProfessType (item) {
      console.log(item)
    },
    //分页
    handleCurrentChange () {

    },
    //点击项目进行跳转
    linkto () {
      this.$router.push('/SellerMarket')
    }
  },
  created () {
    this.getAddressData()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.tender-manage-container {
  padding: 20px;
  .search-form-container {
    .pull-right {
      margin-bottom: 40px;
      .search-input {
        width: 250px;
      }
      .search-btn {
        background: #1890ff;
        color: #fff;
      }
    }
  }
  .tender-project-row {
    margin-bottom: 40px;
    .tender-project-container {
      width: 100%;
      height: 235px;
      padding: 8px;
      cursor: pointer;
      border: 1px solid #000;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 175px;
        display: block;
        border: 1px solid #000;
      }
    }
  }
}
</style>